<template>
  <div>
    <div style="width:100%;position: fixed;top: 0;left: 0;z-index: -10;bottom: 0;right: 0; background-color: #f2f6fc"></div>
    <div class="title" style="font-size:23px;margin-bottom: 30px;padding-top:40px">登录在线聊天室</div>
    <el-card class="login-card">
      <div class="login-place">用户名</div>
      <el-input v-model="uid" class="login-input"></el-input>
      <div class="login-place">密码</div>
      <el-input v-model="password" class="login-input" show-password></el-input>
      <el-checkbox style="float: left" v-model="autoLogin">自动登录</el-checkbox>
      <el-button type="primary" size="medium" style="width: 100%; margin-top:15px" :loading="btnLoading" @click="toLogin">登录</el-button>
    </el-card>
    <router-link to='./register'>
      <div class="register">没有帐户?
        <el-button type="text"> 注册一个 </el-button>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      windowHeight: window.innerHeight,
      autoLogin: true,
      uid: '',
      password: '',
      btnLoading: false
    }
  },
  methods: {
    toLogin () {
      if (this.uid === '') {
        this.$message.warning('请输入用户名')
        return
      }
      if (this.password === '') {
        this.$message.warning('请输入密码')
        return
      }
      var that = this
      this.btnLoading = true
      this.$http(this.$api.login, {uid: this.uid, password: this.password}).then(res => {
        console.log(res)
        if (res.code === -1) {
          that.$message.error('用户名或密码错误,请重试！')
        } else {
          this.$message.success('登录成功！')
          window.localStorage.setItem('userInfo', JSON.stringify(res.data))
          window.localStorage.setItem('uid', res.data.uid)
          that.$router.push('/app')
        }
        that.btnLoading = false
      }, fail => {
        that.$message.error('错误: ' + fail)
        that.btnLoading = false
      })
    }
  },
  mounted () {
    var that = this
    window.onresize = () => {
      return (() => {
        that.windowHeight = window.innerHeight
      })()
    }
    console.log('change')
  },
  beforeCreate () {
    this.windowHeight = window.innerHeight
  }
}
</script>

<style scoped>
.login-card{
  width: 320px;
  margin: auto;
  border-radius: 10px;
  position: relative;
  padding: 7px;
}
  .login-input{
    margin: 10px 0 10px 0;
  }
  .login-place{
    text-align: left;
    font-weight: bold;
    font-size: 14px;
  }
  .register{
    width: 320px;
    margin: auto;
    padding:7px;
    border-radius: 10px;
    z-index: 10;
    margin-top:10px;
    border-style: solid;
    border-width: 1px;
    border-color: #e4e7ed;
    font-size: 14px;
  }
</style>
